<!DOCTYPE HTML>
<!-- Website template by freewebsitetemplates.com -->
<html>
<head>
	<meta charset="UTF-8">
	<title>Booking Result</title>
	<link rel="stylesheet" href="css/style.css" type="text/css">
	<link rel="stylesheet" href="css/tabs-no-images.css" type="text/css">
	<link rel="stylesheet" href="css/view.css" type="text/css">
	<script type="text/javascript" src="javascript/view.js"></script>
	<script type="text/javascript" src="javascript/calendar.js"></script>
	<script type="text/javascript" src="javascript/jquery-2.0.3.min.js"></script>
	<script type="text/javascript">
	function onAccomodationSelected(value) {
		var query_part = "value=" + value;

		if (location.search != "") {
			query_part += "&" + location.search.substring(1);
		}

		var arrival_query_chunk = "a_year=" + $("#arrival_year").val() + "&a_month=" + $("#arrival_month").val() + "&a_day=" + $("#arrival_day").val();
	 	var departure_query_chunk = "d_year=" + $("#departure_year").val() + "&d_month=" + $("#departure_month").val() + "&d_day=" + $("#departure_day").val();

		document.location.href = "booking_form.html?" + query_part + "&" + arrival_query_chunk + "&" + departure_query_chunk;
	}

	var urlParams;
	function decodeQueryString()
	{
		var hash = window.location.search.substr(1);
		var match,
        pl     = /\+/g,  // Regex for replacing addition symbol with a space
        search = /([^&=]+)=?([^&]*)/g,
        decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
        query  = window.location.search.substring(1);

        urlParams = {};
        while (match = search.exec(query))
        	urlParams[decode(match[1])] = decode(match[2]);
	}
	function loadParams() 
	{
		decodeQueryString();
		var roomsElement = $("rooms");
		$("#rooms").val(urlParams["rooms"]);
		$("#guests").val(urlParams["guests"]);
		$("#arrival_day").val(urlParams["a_day"]);
		$("#arrival_month").val(urlParams["a_month"]);
		$("#arrival_year").val(urlParams["a_year"]);
		$("#departure_day").val(urlParams["d_day"]);
		$("#departure_month").val(urlParams["d_month"]);
		$("#departure_year").val(urlParams["d_year"]);
	}
	</script>
</head>
<body onload="loadParams();">
	<div id="wrapper">
		<div id="header">
			<div class="clearfix">
				<div class="logo">
					<a href="index.html"><img src="images/logo.jpg" alt="LOGO" height="85" width="250"></a>
				</div>
				<ul class="css-tabs">
					<li>
						<a href="contact.html">Contact Us</a>
					</li>
					<li>
						<a href="local_attractions.html">Local Attractions</a>
					</li>
					<li>
						<a href="facilities.html">Facilities</a>
					</li>
					<li>
						<a href="index.html">Home</a>
					</li>
				</ul>
			</div>
		</div>
		<div id="contents">
			<div class="clearfix">
				<div class="sidebar">
					<form>
						<ul>
							<li>Arrival date</li>
							<div>
								<span class="darkbeigefont">
									<input id="arrival_month" name="element_1_1" class="element text" size="2" maxlength="2" value="" type="text"> / 
									<label for="element_1_1" class="darkbeigefont">MM</label>
								</span>
								<span class="darkbeigefont">
									<input id="arrival_day" name="element_1_2" class="element text" size="2" maxlength="2" value="" type="text"> /
									<label for="element_1_2" class="darkbeigefont">DD</label>
								</span>
								<span class="darkbeigefont">
									<input id="arrival_year" name="element_1_3" class="element text" size="4" maxlength="4" value="" type="text">
									<label for="element_1_3" class="darkbeigefont">YYYY</label>
								</span>
								<span id="calendar_1">
									<img id="cal_img_1" class="datepicker calendar" src="images/calendar.gif" alt="Pick a date.">	
								</span>
								<script type="text/javascript">
								Calendar.setup({
									inputField	 : "arrival_year",
									baseField    : "arrival",
									displayArea  : "calendar_1",
									button		 : "cal_img_1",
									ifFormat	 : "%B %e, %Y",
									onSelect	 : selectDate
								});
								</script>
							</div>
							<li>Departure date</li>
							<div style="width:inherit"> 
								<span class="darkbeigefont">
									<input id="departure_month" name="element_2_1" class="element text" size="2" maxlength="2" value="" type="text"> / 
									<label for="element_2_1" class="darkbeigefont">MM</label>
								</span>
								<span class="darkbeigefont">
									<input id="departure_day" name="element_2_2" class="element text" size="2" maxlength="2" value="" type="text"> /
									<label for="element_2_2" class="darkbeigefont">DD</label>
								</span>
								<span class="darkbeigefont">
									<input id="departure_year" name="element_2_3" class="element text" size="4" maxlength="4" value="" type="text">
									<label for="element_2_3" class="darkbeigefont">YYYY</label>
								</span>
								<span id="calendar_2">
									<img id="cal_img_2" class="datepicker calendar" src="images/calendar.gif" alt="Pick a date.">	
								</span>
								<script type="text/javascript">
								Calendar.setup({
									inputField	 : "departure_year",
									baseField    : "departure",
									displayArea  : "calendar_2",
									button		 : "cal_img_2",
									ifFormat	 : "%B %e, %Y",
									onSelect	 : selectDate
								});
								</script>
							</div>
							<li>Rooms</li>
							<div>
								<td>
									<select id="rooms" name="rooms">
										<option value="1">1</option>
										<option value="2">2</option>
										<option value="3">3</option>
										<option value="4">4</option>
										<option value="5">5</option>
										<option value="6">6</option>
										<option value="7">7</option>
										<option value="8">8</option>
										<option value="9">9</option>
										<option value="10">10</option>
									</select>
								</td>
							</div>
							<li>Guests</li>
							<div>
								<td>
									<select id="guests" name="guests">
										<option value="1">1</option>
										<option value="2">2</option>
										<option value="3">3</option>
										<option value="4">4</option>
										<option value="5">5</option>
										<option value="6">6</option>
										<option value="7">7</option>
										<option value="8">8</option>
										<option value="9">9</option>
										<option value="10">10</option>
									</select>
								</td>
							</div>
							<hr/>
							<li>Room Type</li>
							<div class="checkbox">
								<input type="checkbox" name="roomtype" value="single_room">Single Room<br>
								<input type="checkbox" name="roomtype" value="suite_room">Suite Room<br>
							</div>
						</ul>
						<br/>
						<div ><a href="booking_result.html" class="creamybutton fullwidth">Modify</a></div>
					</form>
				</div>
				<div class="main">
					<div class="section last-child" id="bookingresult">
						<table>
							<tr>
								<td width="180px" height="107"><img src="images/single-room.jpg" alt="LOGO" class="img-room"/></td>
								<td width="270px" height="107">
									<div class="roomdesc">
										<p><strong>Single Room</strong></p>
										<p>Breakfast included. <br/>Wifi, cable TV, AC. Refundable</p>
									</div>
								</td>
								<td width="22%" class="price-col" height="107">
									<table>
										<tr height="50px"> <td class="price">$ 50</td> </tr>
										<tr height="55px"> 
											<td style="vertical-align:bottom">
												<div class="floatright" width="inherit" >
													<div class="book"><a href="#" class="creamybutton" onClick="onAccomodationSelected(50);">Book</a></div>
												</div>
											</td> 
										</tr>
									</table>
								</td>
							</tr>
							<tr>
								<td width="180px"><img src="images/suite-room.jpg" alt="LOGO" class="img-room"/></td>
								<td width="270px">
									<div class="roomdesc">
										<p><strong>Suite Room</strong></p>
										<p>Breakfast included. <br/>Wifi, cable TV, AC. Non refundable</p>
									</div>
								</td>
								<td width="22%" class="price-col">
									<table>
										<tr height="60px"> <td class="price">$ 50</td> </tr>
										<tr height="45px"> 
											<td style="vertical-align:bottom">
												<div class="floatright" width="inherit" >
													<div class="book"><a href="#" class="creamybutton" onClick="onAccomodationSelected(50);">Book</a></div>
												</div>
											</td> 
										</tr>
									</table>
								</td>
							</tr>
						</table>
					</div>
					
				</div>
			</div>
		</div>
		<div id="footer">
			<div id="footnote">
				<div class="clearfix">
					<p>
						© Copyright 2013 Alexandra Ringaile Valery Yasmin. All Rights Reserved.
					</p>
				</div>
			</div>
		</div>
	</body>
	</html>